import React, { Component } from 'react';
import { withRouter, Route } from 'react-router-dom';
import { Button, List, Tools, Icon, Checkbox } from 'weaver-mobile';
import { RouteLayout } from 'weaver-mobile-page';

import FolderManage from '../setting/folderManage';
import { TitleUtil } from '../../util';

const { callApi, getLabel } = Tools;
const { Item } = List;

/**
 * props说明:
 *  - path: 页面路由
 *  - onSubmit([keys]): 返回结果
 */
@withRouter
export default class MoveTo extends Component {
  prefixCls = "email-move-to";

  static defaultProps = {
    path: '/moveTo',
  }

  constructor(props) {
    super(props);
    this.state = {
      data: [],
      selectedKeys: [],
    };
  }

  componentDidMount() {
    window.isUmount = false;
    TitleUtil.setTitle(getLabel('81298','移动到'));
    this.getListData();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.path === nextProps.location.pathname) {
      TitleUtil.setTitle(getLabel('81298','移动到'));
    }
  }

  componentWillUnmount() {
    window.isUmount = true;
    TitleUtil.resetEmElement();
  }

  getListData = () => {
    const { params } = this.props;
    callApi({
      url: '/api/email/view/getViewPageMoveListByMobile',
      params: { ...params },
    }).then(res => {
      const { moveList } = res;
      let selectedKeys = [];
      moveList.forEach((group) => {
        group.groupItems.forEach(item => {
          const { selected } = item;
          if (selected) {
            selectedKeys = [item];
          }
        });
      });
      this.setState({ data: moveList, selectedKeys });
    });
  }

  renderMoveList = (list) => (
    <div className={`${this.prefixCls}-list-body`}>
      {list.length > 0 && list.map(d => (
        <Item key={d.id} >
          <div className={`${this.prefixCls}-list-item`}>
            {d.icon && <div className={`${this.prefixCls}-list-item-icon`}><Icon type={d.icon} /></div>}
            <div className={`${this.prefixCls}-list-item-label`}>{d.label}</div>
            <div className={`${this.prefixCls}-list-item-checkbox`}>
              <Checkbox
                checked={this.state.selectedKeys.findIndex(data => data.id === d.id) !== -1}
                onChange={e => this.setState({ selectedKeys: e.target.checked ? [d] : [] })}
              />
            </div>
          </div>
        </Item>
      ))}
    </div>
  )
  render() {
    const { path, onSubmit, history } = this.props;
    const { data, selectedKeys } = this.state;
    const route = `${path}/folderManage`;
    return (
      <RouteLayout>
        <div className={`${this.prefixCls} wm-route-layout`} key="move-to">
          <div className={`${this.prefixCls}-view`}>
            {data.length > 0 && data.map((d, index) =>
              <List className={`${this.prefixCls}-list`} key={index} renderHeader={d.groupTitle ? (
                <div className={`${this.prefixCls}-list-header`}>
                  <div className={`${this.prefixCls}-list-header-title`}>{d.groupTitle}</div>
                  <div className={`${this.prefixCls}-list-header-icon`}>
                    <Icon type="setting-up" onClick={() => history.push(route)} />
                  </div>
                </div>
              ) : null}>
                {this.renderMoveList(d.groupItems)}
              </List>
            )}
          </div>
          <div className="btn-group">
            <Button type="primary" onClick={() => onSubmit && onSubmit(selectedKeys.map(d => d.id), selectedKeys)}>
              {getLabel('826', '确定')}
            </Button>
          </div>
          <Route
            key="folderSetting"
            path={route}
            render={() => (
              <RouteLayout>
                <div key="folderSetting" className="wm-route-layout">
                  <FolderManage title={getLabel('81343','文件夹管理')} refreshList={() => this.getListData()} />
                </div>
              </RouteLayout>
            )}
          />
        </div>
      </RouteLayout>
    );
  }
}